<template>
  <div class="fc_333">
    <div>
      <div class="ub bg_w ub-ac ub-pj pad_1" @click="pzlx=true">
        <div class="ub ub-ac wd_30">凭证类型</div>
        <input readonly="readonly" class="ub bg_w ub-f1 holder_d" v-model="pzlxname">
        <div class="ub ub-ac ub-pe">
          <div><img class="ub img5" src="./arrow_down@2x.png" alt="header-l-icon"></div>
        </div>
      </div>
      <div class="ub bg_w ub-ac ub-pj pad_1">
        <div class="ub ub-ac wd_30">{{pzlxname}}</div>
        <input class="ub bg_w ub-f1 holder_d" v-model="ticketNO" :placeholder="'请输入'+pzlxname" v-on:input="autofixed">
      </div>
      <div class="ub bg_w ub-ac ub-pj pad_1">
        <div class="ub ub-ac wd_30">旅客姓名</div>
        <input class="ub bg_w ub-f1 holder_d " v-model="passengerName" placeholder="请输入旅客姓名">
      </div>
    </div>
    <div class="ub commit mar_05 ub-pc ub-ac" @click="submit">
      <div>立刻预订</div>
    </div>
    <div class="pop-select-bottom" v-show="pzlx" @click="pzlx=false">
      <ul class="pop-select">
        <li class="item" @click="lklx_sel('身份证','')">身份证</li>
        <li class="item" @click="lklx_sel('护照')">护照</li>
        <li class="item" @click="lklx_sel('票号')">票号</li>
      </ul>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
import { mapState } from 'vuex';
const regTicket = /^847$/;
export default {
  name: 'addPassenger',
  created: function () {
    this.$store.commit('changeHeader', {
      left: '返回',
      right: '',
      middle: '增值服务',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    console.log(this.xingli.data.ticketNO);
    this.pzlxname = this.xingli.data.pzlxname;
    this.passengerName = this.xingli.data.passengerName;
    this.ticketNO = this.xingli.data.ticketNO;
  },
  computed: mapState(['loginData', 'xingli']),
  data: function () {
    return {
      ticketNO: '',
      passengerName: '',
      pzlx: false,
      pzlxname: ''
    };
  },
  components: {
  },
  methods: {
    autofixed: function () {
      if (this.pzlxname === '票号' && regTicket.test(this.ticketNO)) {
        this.ticketNO = this.ticketNO + '-';
      }
    },
    lklx_sel: function (type) {
      this.pzlxname = type
    },
    submit: function () {
      if (this.passengerName === '' || this.ticketNO === '') {
        this.$store.dispatch('showTx', { text: '请输入完整信息' });
        return false;
      }
      let data = {
        pzlxname: this.pzlxname,
        passengerName: this.passengerName,
        ticketNO: this.ticketNO
      }
      this.$store.commit('setXingli', data)
      this.$router.push('/Reservation')
    }
  }
}
</script>

<style lang="stylus">
@import '../../stylus/base.styl';
.pop-select-bottom
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 111;
  background: rgba(0, 0, 0, 0.6);
.margin-l05
  margin-left: f_times(0.5);
.mar_t05
  margin-top: f_times(0.5);
.margin-l1
  margin-left: $fontSize;
.padding-css2
  padding: $fontSize;
.mt-1
  margin-top: 1rem;
  line-height: f_times(1.5);
.margin-l05
  margin-left: f_times(0.5);
.mar_t05
  margin-top: f_times(0.5);
.margin-l1
  margin-left: $fontSize;
input
  height: f_times(1.5);
.pad_1
  border-bottom: 1px solid #eee;
  padding: f_times(1.2) f_times(0.5) f_times(1.2) f_times(0.5);
.commit
  background-color: #843d99;
  color: white;
  width: 100% -$fontSize;
  box-sizing: border-box;
  height: f_times(2.5);
  border-radius: 3px;
  margin-top: f_times(1.5);
.pop-select
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-left: f_times(0.7);
  padding-right: f_times(0.7);
  background: #fff;
.pop-select .item
  height: f_times(3.5);
  line-height: f_times(3.5);
  border-bottom: 1px solid #e0e0e0;
  margin-right: f_times(1.4);
  text-align: center;
.pop-select .selected
  background: url('../passengers/tick@2x.png') no-repeat right center;
  background-size: f_times(1.1);
</style>